<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <form id="formElem">
      <input type="text" name="firstName" value="John" />
      Picture: <input type="file" name="picture" accept="image/*" />
      <input type="submit" />
    </form>
  </body>
</html>

<script>
  let formElem = document.getElementById('formElem')

  formElem.onsubmit = async e => {
    for (let [key, value] of new FormData(formElem)) {
      alert(`key:${key} => value:${value}`)
    }
    // console.log('formDate', new FormData(formElem))
    // console.log('e', e)
    // e.preventDefault()

    // let response = await fetch('/article/formdata/post/user-avatar', {
    //   method: 'POST',
    //   body: new FormData(formElem)
    // })

    // console.log('response', response)

    // let result = await response.json()

    // console.log('result', result)
    // console.log(message, result.message)
  }
</script>
